<template>
	<view class="charts-box">
		<qiun-data-charts type="rose" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	import {hazardlevelPie} from '@/api/ring.js'
	export default {
		props:['yearMonth'],
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					//      "#48DE94", "#1F90FF", "#5155C6", "#5644FF","#FFEBC8","#FF4C52","#72dce8","#3ee063"
					// color: ["#7AECF8","#A5A1FF","#5155C6", "#FAB2FF","#EDCE85","#FEA492","#7AECF8","#48DE94","#48DE94", "#1F90FF", "#5155C6", "#5644FF","#FFEBC8","#FF4C52","#72dce8","#3ee063"],
					padding: [1, 1, 1, 1],
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 10,
						fontSize: 10
					},
					extra: {
						rose: {
							type: "area",
							minRadius: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 1,
							labelHight: 1,
							border: false,
							borderWidth: 20,
							borderColor: "#FFFFFF",
							linearType: "custom",
				
						}
					}
				},
				// opts: {
				// 	color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				// 		"#ea7ccc"
				// 	],
				// 	padding: [5, 5, 5, 5],
				// 	enableScroll: false,
				// 	legend: {
				// 		show: true,
				// 		position: "left",
				// 		lineHeight: 25
				// 	},
				// 	extra: {
				// 		rose: {
				// 			type: "area",
				// 			minRadius: 50,
				// 			activeOpacity: 0.5,
				// 			activeRadius: 10,
				// 			offsetAngle: 0,
				// 			labelWidth: 15,
				// 			border: false,
				// 			borderWidth: 2,
				// 			borderColor: "#FFFFFF"
				// 		}
				// 	}
				// }
			}
		},
		mounted() {
			this.getServerData();
		},
		watch:{
			yearMonth(){
				this.getServerData();
			}
		},
		methods: {
			getServerData() {
				hazardlevelPie(this.yearMonth).then(res=>{
					// console.log(res);
					const keyMap = {
					  level: 'name',
					  count: 'value'
					};
					
					let data = res.data;
					const result = data.map(obj => 
					  Object.keys(obj).reduce((acc, key) => {
						 const newKey = keyMap[key] || key;
						 acc[newKey] = obj[key];
						 acc.labelShow = false
						 return acc;
					  }, {})
					);
					
					let resData = {
						series: [{
							data: result
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(resData));
				})
				
			},
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 200rpx;
	}
</style>